<template>
  <div>
    <main-nav index="1"></main-nav>
    <div class="container margin-top-15">
      <i-card dis-hover :bordered="false">
        <p slot="title">筛选课程</p>
        <i-form @submit.native.prevent="search()">
          <filters @changed="filterChanged" ref="filters"></filters>
          <tag-select
            label="内容"
            :showDefault="true"
            :options="[{index: true, name: '视频课程'}, {index: false, name: '非视频课程'}]"
            :value.sync="query.video"
          ></tag-select>
        </i-form>
      </i-card>

      <div class="main-container">
        <i-radio-group v-model="query.orderBy" type="button" class="margin-top-10 order-by-items">
          <i-radio label="CreatedAtDesc">发布时间</i-radio>
          <i-radio label="ViewedDesc">浏览数</i-radio>
          <i-radio label="RecommendedDesc">推荐数</i-radio>
          <i-radio label="HighlyRecommendedDesc">名师推荐</i-radio>
        </i-radio-group>
        <i-row :gutter="20" class="margin-top-15 margin-bottom-10">
          <i-col
            :md="6"
            :sm="8"
            :xs="12"
            v-for="(item, index) in lessons"
            v-bind:key="'course_' + index"
          >
            <course-item :data="item"></course-item>
          </i-col>
        </i-row>
        <p v-show="totalLessons === 0">暂无数据</p>
        <i-page
          v-show="totalLessons"
          :page-size="12"
          :total="totalLessons"
          style="text-align: center"
          :current="query.page"
          size="small"
          @on-change="search"
          show-total
          show-elevator
        ></i-page>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import Filters from '../components/filters'
import MainNav from '../components/main-nav'
import TagSelect from '../components/filters/TagSelect'
import CourseItem from '../components/course-item'
export default {
  data() {
    return {
      query: {
        orderBy: 'CreatedAtDesc',
        video: null,
        courseType: 0,
        grade: null,
        edition: null,
        subject: null,
        page: 1
      }
    }
  },
  components: {
    MainNav,
    Filters,
    CourseItem,
    TagSelect
  },
  computed: {
    ...mapGetters({
      totalLessons: 'totalLessons',
      lessons: 'lessons'
    })
  },
  watch: {
    'query.video'() {
      this.search()
    },
    'query.orderBy'() {
      this.search()
    }
  },
  methods: {
    ...mapActions({
      searchLessons: 'searchLessons'
    }),
    search(page) {
      this.query.page = page || 1
      this.searchLessons(this.query)
    },
    filterChanged(data) {
      if (
        data.grade === this.query.grade &&
        data.subject === this.query.subject &&
        data.edition === this.query.edition
      ) {
        return
      }

      this.query.grade = data.grade
      this.query.subject = data.subject
      this.query.edition = data.edition

      this.search()
    }
  },
  activated() {
    const query = this.$route.query
    if (query.grade) this.$refs.filters.grade = query.grade
    if (query.subject) this.$refs.filters.subject = query.subject
    if (query.orderBy) this.query.orderBy = query.orderBy
    this.filterChanged(query)
  }
}
</script>

<style lang="less" scoped>
</style>
